<template>
	<view class="pageview">
		<cl-navbar autoBack placeholder :title="$t('addressbook.friend_group.title')">
			<template slot="right">
				<text style="font-size: 28rpx;" @click="manageClick">{{$t("addressbook.friend_group.manage")}}</text>
			</template>
		</cl-navbar>
		<view class="searchview">
			<u-search height="64rpx" :showAction="false" :clearabled="false" bgColor="#1e1f30" :inputStyle="{fontSize:'24rpx'}" :placeholder="$t('commonality.search')" @input="searchInput"></u-search>
		</view>
		<view class="pageContent">
			<u-collapse :border="false" ref="collapses">
				<u-collapse-item :title="item.group_name" :clickable="false" :isLink="false" v-for="(item,index) in friendGroupList" :key="index">
					<text slot="value" class="groupvalue">
						<!-- {{item.online}}/{{item.totality}} -->
						{{item.data.length}}
					</text>
					
					<view class="listitemview">
						<view class="listitem" v-for="(cell, idx) in item.data" :key="'item'+idx" @click="goFriend(cell)">
							<view class="listitem__left">
								<cl-avatar :src="cell.avatar_url" size="100rpx"></cl-avatar>
							</view>
							<view class="listitem__right">
								<view class="listitem__right__top">
									<text class="listitem__right__top__nickname">{{cell.friend_remark || cell.nick_name}}</text>
								</view>
								<view class="listitem__right__content">
									<text v-if="friendOnline[cell.friend_idx]" style="color: #6aaf76;font-size: 24rpx;">[{{$t("common.friend.online")}}]</text>
									<text v-else style="color: #595A66;font-size: 24rpx;">[{{$t("common.friend.offline")}}]</text>
								</view>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import friendGroupApi from "@/services/api/friendsGroup.js"
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'friend_group',
		data() {
			return {
				grouplist:[],
				searchval:''
			}
		},
		computed: {
			...mapState({
				friendList: state => state.friends.friendList,
				friendOnline: state => state.friends.friendOnline,
			}),
			friendGroupList(){
				//这里是现在离线排序，要求的时候再打开
				let friendData = JSON.parse(JSON.stringify(this.friendList))
				friendData.sort((friend1, friend2) => {
					  const isFriend1Online = this.friendOnline[friend1.friend_idx] || false; // 判断friend1是否在线
					  const isFriend2Online = this.friendOnline[friend2.friend_idx] || false; // 判断friend2是否在线
					  
					  // 如果friend1在线而friend2不在线，将friend1排在前面
					  if (isFriend1Online && !isFriend2Online) {
						return -1;
					  }
					  // 如果friend2在线而friend1不在线，将friend2排在前面
					  if (!isFriend1Online && isFriend2Online) {
						return 1;
					  }
					  // 否则保持原来的顺序
					  return 0;
				});
				let newdata = JSON.parse(JSON.stringify(this.grouplist))
				console.log(newdata);
				for (let index in newdata) {
					let data = newdata[index]
					if(data.group_id == 0){
						newdata[index].data = friendData.filter(item=>{
							if(this.searchval && item.friend_remark.indexOf(this.searchval) === -1 && item.nick_name.indexOf(this.searchval) === -1){
								return false
							}
							return item.friend_group == data.group_id || !item.friend_group
						})
					}else{
						newdata[index].data = friendData.filter(item=>{
							if(this.searchval && item.friend_remark.indexOf(this.searchval) === -1 && item.nick_name.indexOf(this.searchval) === -1){
								return false
							}
							return item.friend_group == data.group_id
						})
					}
				}
				let searchData = newdata.filter(item => {
					// 根据名字筛选
					if (this.searchval && !item.data.length) {
						return false;
					}
					return true;
				});
				return searchData
			}
		},
		watch:{
			friendGroupList(newValue, oldValue) {
			   this.$nextTick(()=>{
			   	 this.$refs.collapses.init()
			   })
			},
		},
		onLoad() {
			//通知页面
			uni.$on('onFriendGroupManage', this.onFriendGroupManage)
			this.getlist()
		},
		onUnload() {
			uni.$off('onFriendGroupManage', this.onFriendGroupManage)
		},
		methods: {
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
				}, 500,false)
			},
			async getlist(){
				try{
					let resapi = await friendGroupApi.list()
					if(resapi){
						this.grouplist = resapi.list
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			onFriendGroupManage(data){
				switch (data.type){
					case 'add':
						this.grouplist.push(data.data)
						break;
					case 'edit':
						let indexedit = this.grouplist.findIndex(it=>it.group_id == data.data.group_id)
						console.log(indexedit)
						if(indexedit != -1){
							this.$set(this.grouplist[indexedit],'group_name',data.data.group_name)
						}
						break;
					case 'del':
						let indexdel = this.grouplist.findIndex(it=>it.group_id == data.data.group_id)
						if(indexdel != -1){
							this.grouplist.splice(indexdel,1)
						}
						break;
					default:
						break;
				}
			},
			goFriend(item){
				this.$Router.push({
					name: 'friend_details',
					params: {
						friend_idx:item.friend_idx,
						friend_remark:item.friend_remark,
						nick_name:item.nick_name,
						avatar_url:item.avatar_url
					}
				});
			},
			manageClick(){
				this.$Router.push({
					name: 'friend_group_manage'
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.groupvalue {
		color: #61626e;
		font-size: 24rpx;
	}
	.searchview {
		margin: 20rpx 30rpx;
		background-color: #1e1f30;
		border-radius: 60rpx;
		padding-right: 20rpx;
	}

	.listitemview {
		.listitem {
			display: flex;
			align-items: center;
			padding: 12rpx 0;
			position: relative;

			&.active {
				background-color: #1E1F30;
			}

			&::after {
				content: "";
				position: absolute;
				width: calc(100% - 140rpx);
				background-color: #1E1F30;
				height: 1rpx;
				bottom: 0;
				right: 0;
			}

			&__right {
				margin-left: 20rpx;
				flex: 1;

				&__top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&__nickname {
						color: #fff;
						font-size: 28rpx;
					}

					&__time {
						color: #61626E;
						font-size: 20rpx;
					}
				}

				&__content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 15rpx;

					&__msg {
						flex: 1;
						font-size: 24rpx;
						color: #595A66;
					}
				}
			}
		}
	}
</style>